<template>
  <van-action-sheet v-model:show="onshow" @close="close">
    <div class="share-content">
      <div class="share-content-title">又玄安全键盘</div>
      <div class="share-content-main" style="padding-bottom: 4.5rem">
        <van-password-input
          class="password"
          :value="pass"
          info="输入6位数字密码"
          :focused="showKeyboard"
          @focus="showKeyboard = true"
          style="margin: 0; width: 100%"
        />
        <van-number-keyboard
          v-model="pass"
          :show="showKeyboard"
          @blur="showKeyboard = true"
        />
      </div>
    </div>
  </van-action-sheet>
</template>

<script>
import { watch, ref } from "vue";
export default {
  name: "pay-pass",
  emits: ["close"],
  props: {
    show: {
      type: Boolean,
      default: false,
    },
  },
  setup(props, ctx) {
    const onshow = ref(props.show);
    const pass = ref();
    watch(props, () => {
      onshow.value = props.show;
      showKeyboard.value = true;
    });
    watch(pass, () => {
      if (pass.value.length == 6) {
        ctx.emit("close", pass.value); // 输入完成
        pass.value = "";
      }
    });
    const close = () => {
      ctx.emit("close");
    };
    const showKeyboard = ref(true);

    return {
      close,
      onshow,
      pass,
      showKeyboard,
    };
  },
};
</script>

<style scoped lang="scss">
.share-content-title {
  text-align: center;
  padding: .3846rem;
  padding-bottom: 30px;
  padding-top: 30px;
  font-size: .3846rem;
  font-weight: bold;
}

.van-number-keyboard {
  padding-bottom: 0rem;
}
</style>
